/**
 * Created by 13576 on 2017/9/21.
 */
import React from 'react';
import { connect } from 'react-redux';
import { Button, Form, Switch, Input, message, Icon } from 'antd';
import { messages } from 'share/common';
import budgetItemTypeService from 'containers/budget-setting/budget-organization/budget-item-type/budget-item-type.service';
import 'styles/budget-setting/budget-organization/buget-item-type/budget-item-type.scss';
import { LanguageInput } from 'components/template';

const FormItem = Form.Item;

class NewBudgetItemType extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      params: {},
      isEnabled: true,
      isPut: false,
      loading: false,
      i18n: {}
    };
  }

  //新建
  handleSave = (e) => {
    e.preventDefault();
    const { i18n } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({ loading: true });
        let toValue = {
          'isEnabled': values.isEnabled,
          'itemTypeName': values.itemTypeName,
          'itemTypeCode': values.itemTypeCode,
          'organizationId': this.props.organization.id,
          i18n
        };
        budgetItemTypeService.addItemType(toValue)
          .then(() => {
            this.props.form.resetFields();
            this.props.close(true);
            message.success(messages('common.create.success', { name: messages('budget-setting.key98'/*预算项目类型*/) }));
          })
          .catch((e) => {
            message.error(messages('common.save.filed') +
              `, ${e.response.data.validationErrors ? e.response.data.validationErrors[0].message : e.response.data.message}`);
          })
          .finally(() => {
            this.setState({ loading: false });
          });
      }
    });
  };

  onCancel = () => {
    this.props.close();
  };

  switchChange = () => {
    this.setState((prevState) => ({
      isEnabled: !prevState.isEnabled
    }))
  }

  handleI18n = (name, value) => {
    let { i18n, itemTypeName } = this.state;
      i18n.itemTypeName = value;
      itemTypeName = name;
    this.setState({ itemTypeName, i18n });
  };

  render() {
    const {getFieldDecorator} = this.props.form;
    const { isEnabled, i18n, itemTypeName } = this.state;
    const formItemLayout = {
      labelCol: {span: 6, offset: 1},
      wrapperCol: {span: 14, offset: 1},
    };
    return (


      <div className="new-value">
        <Form onSubmit={this.handleSave}>
          <FormItem {...formItemLayout}
                    label={messages('budget-setting.key95'/*状态*/)}>
            {getFieldDecorator('isEnabled', {
              valuePropName: "defaultChecked",
              initialValue: isEnabled
            })(
              <div>
                <Switch defaultChecked={isEnabled} checkedChildren={<Icon type="check"/>}
                        unCheckedChildren={<Icon type="cross"/>} onChange={this.switchChange}/>
                <span className="enabled-type" style={{
                  marginLeft: 20,
                  width: 100
                }}>{ isEnabled ? messages('common.enabled') : messages('common.disabled') }</span>
              </div>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('budget-setting.key47'/*预算组织*/)}>
            {getFieldDecorator('organizationName', {
              rules: [{}],
              initialValue: this.props.organization.organizationName

            })(
              <Input disabled/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('budget-setting.key93'/*预算项目类型代码*/)}>
            {getFieldDecorator('itemTypeCode', {
              rules: [{
                required: true,
                message: messages('common.please.enter')
              }],
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('budget-setting.key94'/*预算项目类型名称*/)}>
            {getFieldDecorator('itemTypeName', {
              rules: [{
                required: true,
                message: messages('common.please.enter')
              }],
            })(
              <LanguageInput
                name={itemTypeName}
                i18nName={i18n.itemTypeName || null}
                nameChange={this.handleI18n}
                placeholder={messages('common.please.enter')/* 请输入 */}/>
            )}
          </FormItem>

          <div className="slide-footer">
            <Button type="primary" htmlType="submit"
                    loading={this.state.loading}>{messages('common.save')}</Button>
            <Button onClick={this.onCancel}>{messages('common.cancel')}</Button>
          </div>
        </Form>
      </div>
    )
  }
}


const WrappedNewBudgetItemType = Form.create()(NewBudgetItemType);
function mapStateToProps(state) {
  return {
    organization: state.budget.organization
  }
}
export default connect(mapStateToProps)(WrappedNewBudgetItemType);
